<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>携程-首页-121邹圣洁</title>
    <link rel="stylesheet" href="download/font_ewrrrydj26/iconfont.css">
    <link rel="stylesheet" href="swiper/swiper-bundle.min.css">
    <style>
        body,ul,p{
            margin: 0;
            padding: 0;
        }
        body{
            background-color: #dddddd;
        }
        #head{
            width: 100%;
            display: flex;
            height: 70px;
            background: linear-gradient(to right,#30a3ff,#2383fb);
            position: relative;
            margin-top: -10px;
            z-index: 100;
        }
        a{
            text-decoration: none;
            display: inline-block;
            color: #000;
        }
        #head form{
            display: flex;
            flex-grow: 1;
            height: 50px;
        }
        #head #div{
            flex-grow: 1;
            display: flex;
            background-color: #fff;
            border-radius: 32px;
            height: 40px;
            margin-top: 20px;
            margin-left: 20px;
        }
        #head .icon-dituleiditu{
            display: inline-block;
            font-size: 28px;
            color: #fff;
            margin-left: 20px;
            margin-top: 18px;
        }
        #head #ly{
            color: #fff;
            margin-left: 10px;
            font-size: 13px;
        }
        #head form #search{
            outline: none;
            flex-grow: 1;
            height: 35px;
            background-color: #fff;
            border: none;
            margin-left: 40px;
        }
        #head #sub{
            font-size: 16px;
            border: none;
            width: 65px;
            margin-right: 60px;
            border-radius: 32px;
            height: 38px;
            background: linear-gradient(to right,#3bbfff,#4da7ff);
            color: #fff;
            margin-top: 1px;
            margin-right: 1px;
            font-family: "黑体";
        }
        .ws .swiper-wrapper{
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        color: rgb(26, 26, 26);
        letter-spacing: 2px;
        margin-left: 15px;
      }
      .ws .swiper-slide{
        height: 40px;
      }
        ul{
            list-style: none;
        }
        a{
            text-decoration: none;
            color: #303030;
            display: inline-block;
            font-size: 20px;
        }
        #nav{
            position: fixed;
            width: 100%;
            left: 0;
            bottom: 0;
            z-index: 100;
            display: flex;
            background-color: #fff;
            box-shadow: 0px 0px 0px 3px rgb(247, 247, 247);
        }
        #nav li{
            width: 20%;
            text-align: center;
            font-family: "华文细黑";
            font-size: 14px;
        }
        .iconfont{
            font-size: 30px;
            letter-spacing: 20px;
        }
        .icon-xiaoxi,.icon-SX_015,.icon-wodejifen{
            font-size: 28px;
        }
        p{
            margin-right: 20px;
            font-size: 14px;
            font-weight: normal;
        }
        #nav a:hover,a:active{
            color: #3d85fb;
        }

        #n{
            width: 100%;
            height: 45px;
            background: linear-gradient(to right,#30a3ff,#2383fb);
        }
        .an{
            display: flex;
            width: 80%;
            position: absolute;
            top: 58px;
            height: 30px;
            margin-left: 11%;
        }
        .an li{
            width: 10%;
            text-align: center;
            margin: 10px;
            background-color: #3bbeff94;
            font-size: 14px;
            color: #fff;
            border-radius: 20px;
            height: 25px;
            line-height: 25px;
        }

        #tubiao{
            width: 80%;
            margin: 0 auto;
            margin-top: 10px;
            position: relative;
        }
        #tubiao .hang{
            display: flex;
        }
        #tubiao .hang>li{
            width: 20%;
            height: 110px;
            text-align: center;
            display: block;
            margin-left: 2px;
        }
        #tubiao .two{
            margin-top: 2px;
            margin-bottom: 2px;
        }
        .one li:nth-child(1){
            background: linear-gradient(#fa5b57,#fc8450);
            border-radius: 10px 0 0 0;
        }
        .one li:nth-child(2){
            background: linear-gradient(#3d85fb,#4fb1fa);
        }
        .one li:nth-child(3){
            background: linear-gradient(#5e81ff,#66a3fe);
        }
        .one li:nth-child(4){
            background: linear-gradient(#20bbad,#18cebf);
        }
        .one li:nth-child(5){
            background: linear-gradient(#ff8a3a,#ffa746);
            border-radius: 0 10px 0 0;
        }
        .one li:nth-child(5){
            background: linear-gradient(#ff8a3a,#ffa746);
        }
        .two li:nth-child(1),.three li:nth-child(1){
            background-color: #f3d2ca;
        }
        .two li:nth-child(2),.three li:nth-child(2){
            background-color: #cadbf3;
        }
        .two li:nth-child(3),.three li:nth-child(3){
            background-color: #cad1f3;
        }
        .two li:nth-child(4),.three li:nth-child(4){
            background-color: #caf3dc;
        }
        .two li:nth-child(5),.three li:nth-child(5){
            background-color: #f3dfca;
        }
        .three li:nth-child(1){
            border-radius: 0 0 0 10px;
        }
        .three li:nth-child(5){
            border-radius: 0 0 10px 0 ;
        }
        #tubiao .one p{
            color: #fff;
            font-size: 16px;
        }
        #tubiao .one span{
            color: #fff;
            font-size: 45px;
            margin-top: 25px;
            display: block;
        }
        #tubiao .two span{
            margin-top: 25px;
            display: block;
        }
        #tubiao .three span{
            margin-top: 25px;
            display: block;
        }
        .icon-guoneijiudian,.icon-jiudian{
            background:linear-gradient(#ff9762,#fa6056);
            -webkit-background-clip: text;
            color: transparent;
            background-clip: text;
            font-size: 35px;
            padding-bottom: 10px;
        }
        .icon-weilaijiudian,.icon-car-full{
            background:linear-gradient(#4eb0f7,#408ff8);
            -webkit-background-clip: text;
            color: transparent;
            background-clip: text;
            font-size: 35px;
            padding-bottom: 10px;
        }
        .icon-gongjiaoche,.icon-zizhi-chuzuchegongsi{
            color: #797eff;
            font-size: 40px;
            padding-bottom: 10px;
        }
        .icon-menpiao,.icon-ziyuan4{
            background:linear-gradient(#59d9b6,#2fc3b5);
            -webkit-background-clip: text;
            color: transparent;
            background-clip: text;
            font-size: 35px;
            padding-bottom: 5px;
        }
        .icon-meishi,.icon-qian{
            background:linear-gradient(#ffb145,#f97a33);
            -webkit-background-clip: text;
            color: transparent;
            background-clip: text;
            font-size: 40px;
        }
        
        #stxw{
            width: 90%;
            display: flex;
            margin: 0 auto;
            margin-top: 20px;
        }
        #left,#right{
            display: flex;
        }
        #left{
            width: 45%;
            margin-right: 5%;
            margin-left: 3%;
            background-color: #fff;
            border-radius: 10px;
            /* height: 280px; */
        }
        #right{
            width: 45%;
            background-color: #fff;
            border-radius: 10px;
        }
        #stxw ul>li{
            width: 20vw;
        }
        .ul1,.ul2,.ul3,.ul4{
            width: 40%;
        }
        .ul1,.ul3{
            margin-left: 13%;
        }
        #left .ul1 li:nth-child(1) img,#left .ul2 li:nth-child(1) img{
            width: 60%;
        }
        #left .ul1 li:nth-child(2) img,#left .ul2 li:nth-child(2) img{
            width: 70%;
        }
        #right .ul3 li:nth-child(1) img,#right .ul4 li:nth-child(1) img{
            width: 45%;
        }
        #right .ul3 li:nth-child(2) img,#right .ul4 li:nth-child(2) img{
            width: 70%;
        }
        #lbt{
            width: 80%;
            margin: 0 auto;
            margin-top: 20px;
        }
        .lbt{
            overflow: hidden;
            width: 100%;
            margin: 0 auto;
            height: 50%;
        }
        #lb{
            width: 700%;
            overflow: hidden;
            margin-left: -100%;
            height: 50%;
        }
        #lb li{
            float: left;
            width: 14.281%;
            transition: all .5;
            height: 50%;
        }
        #lb img{
            width: 100%;
            height: 50%;
        }

        #tw{
            width: 96%;
            display: flex;
            flex-wrap: wrap;
            margin: 0 auto;
            margin-top: 20px;
        }
        #tw ul li img{
            width: 230px;
        }
        #tw ul{
            width: 230px;
            margin-left: 12px;
            background-color: #fff;
            margin-top: 20px;
            border-radius: 10px;
        }
        #tw ul li p{
            font-size: 18px;
            margin-left: 10px;
        }
        #tw ul:nth-child(3),#tw ul:nth-child(4),#tw ul:nth-child(5){
            height: 370px;
        }
        #jzz{
            width: 120px;
            display: flex;
            height: 150px;
            margin-top: 50px;
            margin: 0 auto;
            text-align: center;
        }
        #jzz p{
            color: rgb(108, 108, 108);
            font-size: 13px;
            margin-top: 40px;
        }
        .icon-a-jiazaizhongdaxiao{
            color: #008aff;
            margin-top: 35px;
        }
    </style>
</head>
<body>
    <header id="head">
        <form action="#">
            <div id="div">
                <div class="swiper ws">
                    <div class="swiper-wrapper">
                      <div class="swiper-slide">大连本地游·景点·酒店</div>
                      <div class="swiper-slide">大连金石滩鲁能温泉假日酒店</div>
                      <div class="swiper-slide">大连一方城堡豪华精选酒店</div>
                    </div>
                  </div>
                <input type="text" name="search" id="search" required>
                <input type="submit" value="搜索" id="sub">
            </div>
            <label for="search">
                <span class="iconfont icon-dituleiditu" id="tb"></span>
                <p id="ly">旅游地图</p>
            </label>
        </form>
    </header>
    <div id="n">
        <ul class="an">
            <li>温泉</li>
            <li>迪士尼</li>
            <li>直播</li>
            <li>发现王国</li>
            <li>大连森林</li>
            <li>迪士尼</li>
            <li>杭州</li>
            <li>三亚</li>
        </ul>
    </div>
    <div id="tubiao">
        <ul class="hang one">
            <li>
                <span class="iconfont icon-jiudian1"></span>
                <p>酒店</p>
            </li>
            <li>
                <span class="iconfont icon-tubiaozhizuomoban_feiji"></span>
                <p>机票</p>
            </li>
            <li>
                <span class="iconfont icon-huochepiao1"></span>
                <p>火车票</p>
            </li>
            <li>
                <span class="iconfont icon-lvyouchanpin"></span>
                <p>旅游</p>
            </li>
            <li>
                <span class="iconfont icon-youjigonglve"></span>
                <p>攻略/景点</p>
            </li>
        </ul>
        <ul class="hang two">
            <li>
                <span class="iconfont icon-guoneijiudian"></span>
                <p>民宿/客栈</p>
            </li>
            <li>
                <span class="iconfont icon-weilaijiudian"></span>
                <p>机+酒</p>
            </li>
            <li>
                <span class="iconfont icon-gongjiaoche"></span>
                <p>汽车/船票</p>
            </li>
            <li>
                <span class="iconfont icon-menpiao"></span>
                <p>门票/活动</p>
            </li>
            <li>
                <span class="iconfont icon-meishi"></span>
                <p>美食/购物</p>
            </li>
        </ul>
        <ul class="hang three">
            <li>
                <span class="iconfont icon-jiudian"></span>
                <p>酒店套餐</p>
            </li>
            <li>
                <span class="iconfont icon-car-full"></span>
                <p>接送机/包车</p>
            </li>
            <li>
                <span class="iconfont icon-zizhi-chuzuchegongsi"></span>
                <p>租车</p>
            </li>
            <li>
                <span class="iconfont icon-ziyuan4"></span>
                <p>周边游</p>
            </li>
            <li>
                <span class="iconfont icon-qian"></span>
                <p>借钱/分期</p>
            </li>
        </ul>
    </div>
    <ul id="nav">
        <li>
            <a href="index.html">
                <span class="iconfont icon-shouye"></span>
                <p>首页</p>
            </a>
        </li>
        <li>
            <a href="sheqv.html">
                <span class="iconfont icon-shequ"></span>
                <p>社区</p>
            </a>
        </li>
        <li>
            <a href="xiaoxi.html">
                <span class="iconfont icon-xiaoxi"></span>
                <p>消息</p>
            </a>
        </li>
        <li>
            <a href="xingcheng.html">
                <span class="iconfont icon-SX_015"></span>
                <p>行程</p>
            </a>
        </li>
        <li>
            <a href="wode.html">
                <span class="iconfont icon-wodejifen"></span>
                <p>我的</p>
            </a>
        </li>
    </ul>
    <div id="stxw">
        <div id="left">
            <ul class="ul1">
                <li>
                    <img src="img/left-1.png">
                </li>
                <li>
                    <img src="img/left-3.png">
                    <p>热卖酒店套餐</p>
                </li>
            </ul>
            <ul class="ul2">
                <li>
                    <img src="img/left-2.png">
                </li>
                <li>
                    <img src="img/left-4.png">
                    <p>酒店4折起</p>
                </li>
            </ul>
        </div>
        <div id="right">
            <ul class="ul3">
                <li>
                    <img src="img/right-1.png">
                </li>
                <li>
                    <img src="img/right-3.png">
                    <p>温泉泡汤酒店</p>
                </li>
            </ul>
            <ul class="ul4">
                <li>
                    <img src="img/right-2.jpg">
                </li>
                <li>
                    <img src="img/right-4.png">
                    <p>爆款热卖必囤</p>
                </li>
            </ul>
        </div>
    </div>
    <div id="lbt">
    <article class="lbt">
        <ul id="lb">
            <li><img src="img/lbt-1.jpg"></li>
            <li><img src="img/lbt-2.jpg"></li>
            <li><img src="img/lbt-3.jpg"></li>
            <li><img src="img/lbt-4.jpg"></li>
            <li><img src="img/lbt-5.jpg"></li>
            <li><img src="img/lbt-6.jpg"></li>
            <li><img src="img/lbt-7.jpg"></li>
        </ul>
    </article>
</div>
<div id="tw">
    <ul>
        <li><img src="img/tw-1.png"></li>
        <li><p>多次去解放牌！就为这口“糯叽叽”酒酿……</p></li>
        <li><img src="img/tw-1-1.png"></li>
    </ul>
    <ul>
        <li><img src="img/tw-2.png"></li>
        <li><p>腾冲旅行|古朴村落里的山景民宿</p></li>
        <li><img src="img/tw-2-1.png"></li>
    </ul>
    <ul>
        <li><img src="img/tw-3.png"></li>
        <li><p>亚洲第一大露天煤矿/抚顺西露天矿</p></li>
        <li><img src="img/tw-3-1.png"></li>
    </ul>
    <ul>
        <li><img src="img/tw-4.png"></li>
        <li><p>沈阳4大网红设计酒店</p></li>
        <li><img src="img/tw-4-1.png"></li>
    </ul>
    <ul>
        <li><img src="img/tw-5.png"></li>
        <li><img src="img/tw-5-1.png"></li>
        <li><p>北京金融街威斯汀大酒店</p></li>
        <li><img src="img/tw-5-2.png"></li>
    </ul>
    <ul>
        <li><img src="img/tw-6.png"></li>
        <li><p>北京第一名塔，却是“官方高仿”</p></li>
        <li><img src="img/tw-6-1.png"></li>
    </ul>
    <ul>
        <li><img src="img/tw-7.png"></li>
        <li><p>烟台|粉色贝壳沙滩少女心炸裂的童话世界</p></li>
        <li><img src="img/tw-7-1.png"></li>
    </ul>
    <ul>
        <li><img src="img/tw-8.png"></li>
        <li><p>和老虎住一晚，是什么体验？“老虎房”</p></li>
        <li><img src="img/tw-8-1.png"></li>
    </ul>
    <ul>
        <li><img src="img/tw-9.png"></li>
        <li><p>永定河休闲公园，走过深秋拥抱初冬</p></li>
        <li><img src="img/tw-9-1.png"></li>
    </ul>
    <ul>
        <li><img src="img/tw-10.png"></li>
        <li><p>北京金融街丽思卡尔顿酒店</p></li>
        <li><img src="img/tw-10-1.png"></li>
    </ul>
    <ul>
        <li><img src="img/tw-11.png"></li>
        <li><p>回购7次了sorry钱钱这个真的hin好吃</p></li>
        <li><img src="img/tw-11-1.png"></li>
    </ul>
    <ul>
        <li><img src="img/tw-12.png"></li>
        <li><p>南坪巷子里的拉面冰粉！冰冰凉凉好清爽！</p></li>
        <li><img src="img/tw-12-1.png"></li>
    </ul>
</div>
<div id="jzz">
    <span class="iconfont icon-a-jiazaizhongdaxiao"></span>
    <p>加载中</p>
</div>




<script src="swiper/swiper-bundle.min.js"></script>
<script>
            window.addEventListener('load',function(){
            var lbt = document.querySelector('.lbt');
            var lb = lbt. children[0];
            var w = lbt.offsetWidth;
            var index = 0;
            var timer = setInterval(function(){
                index++;
                var translatex = -index * w;
                lb.style.transition = 'all .5s';
                lb.style.transform = 'translateX(' + translatex + 'px)';
            },2000);
            lb.addEventListener('transitionend',function(){
                if(index >= 6){
                    index = 0;
                    lb.style.transition = 'none';
                    var translatex = - index * w;
                    lb.style.transform = 'translateX(' + translatex + 'px)';
                }
                else if(index < 0){
                    index = 6;
                    lb.style.transition = 'none';
                    var translatex = - index * w;
                    lb.style.transform = 'translateX(' + translatex + 'px)';
                }
            });
        })

        window.onscroll = function(){
            var st = document.documentElement.scrollTop || document.body.scrollTop;
            if(st>head.offsetHeight){
                head.style.position = "fixed";
                head.style.background = "#fff";
                div.style.border = "2px solid #2383fb";
                ly.style.color = "#2383fb";
                tb.style.color = "#2383fb"
            }
            else{
                head.style.position = "static";
                head.style.background = "linear-gradient(to right,#30a3ff,#2383fb)"
                div.style.border = "none"
                ly.style.color = "#fff"
                tb.style.color = "#fff"
            }
        }

        var swiper = new Swiper(".ws", {
        direction: "vertical",
        autoplay: {
          delay: 1500,
          disableOnInteraction: false,
        },
      });
</script>
</body>
</html>